<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="admin/common/html/tableHead :: head(~{::title},~{::link},~{::style})">

<title th:text=${title}></title>
<!-- 这儿引用单独的css link -->
<!-- Ladda for Bootstrap 3按钮加载进度插件 -->
<link rel="stylesheet" th:href="@{/static/admin/assets/js/button/ladda/ladda.min.css}">
<!-- bootstrap-table表单样式 -->
<link th:href="@{/static/admin/assets/js/bootstrap/css/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
<!-- bootstrap-table表单验证样式 -->
<link th:href="@{/static/admin/assets/js/bootstrap/css/bootstrapValidator.css}" rel="stylesheet"/>

<!-- bootstrap-fileinput上传文件样式 -->
<link th:href="@{/static/admin/assets/js/bootstrap/css/fileinput.css}" rel="stylesheet"/>

	<!--wangrditor富文本编辑器样式-->
<link th:href="@{/static/admin/assets/js/wangEditor/wangEditor1.css}" rel="stylesheet"/>

<!-- 用户界面自定义css -->
<link th:href="@{/static/admin/user/css/user-add.css}" rel="stylesheet"/>
<link th:href="@{/static/admin/user/css/user-add.css}" rel="stylesheet"/>
<style type="text/css">
	.w-e-toolbar {
		flex-wrap: wrap;
	}
</style>
</head>

<body>

<div class="content-wrap">
	<div class="col-sm-12">
		<div class="nest" id="elementClose">
	<div class="row">
				<div class="">
				</div>
				<div class="body-nest" id="element">
					<div class="panel-body">
						<form  class="form-horizontal m" id="form-add">
													       <div class="form-group">
										<label class="col-sm-3 control-label ">轮播图：</label>
										<div class="col-sm-8">
											<input class="form-control" type="text" id="imageUrl" name="imageUrl" required data-bv-notempty-message="轮播图不能为空"/>
										</div>
									</div>
															<div class="form-group">
										<label class="col-sm-3 control-label ">跳转链接：</label>
										<div class="col-sm-8">
											<input class="form-control" type="text" id="skipUrl" name="skipUrl"/>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-3 control-label ">非空校验：</label>
										<div class="col-sm-8">
											<input class="form-control" type="text" id="feikong" name="feikong" required data-bv-notempty-message="该字段不能为空"/>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-3 control-label ">时间：</label>
										<div class="col-sm-8">
											<input type="text" class="form-control" id="MyDate" name="creattime" />
										</div>
									</div>
							                               <div class="form-group">
									    <label class="col-sm-3 control-label ">下拉选项：</label>
										<div class="col-sm-8">
											<select class="form-control">
												<option>1</option>
												<option>2</option>
												<option>3</option>
												<option>4</option>
												<option>5</option>
											</select>
										</div>
									</div>
							<div class="form-group">
								<label class="col-sm-3 control-label ">单选框：</label>
								<div class="col-sm-8">
								<label class="radio-inline">
									<input type="radio" name="sex"value="option1"> 男性
								</label>
								<label class="radio-inline">
									<input type="radio"  name="sex" value="option2"> 女性
								</label>
								<label class="radio-inline">
									<input type="radio" name="sex" value="option3">中性
								</label>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label ">复选框：</label>
								<div class="col-sm-8">
										<label class="checkbox-inline">
											<input type="checkbox"> 记住密码
										</label >
										<label class="checkbox-inline">
											<input type="checkbox"> 记住密码
										</label>
										<label class="checkbox-inline">
											<input type="checkbox"> 记住密码
										</label>
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-3 control-label ">文本框：</label>
								<div class="col-sm-8">
									<textarea  rows="10px"></textarea>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label ">上传图片：</label>
								<div class="col-sm-8">
									<input id="file-5" class="file" name="myfiles" type="file" multiple data-preview-file-type="any">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label ">富文本：</label>
								<div class="col-sm-8">
									<div id="div1"></div>
									<textarea id="text1" style="width:100%; height:200px;"></textarea>
								</div>
							</div>

							<div class="form-group">
								<div class="form-control-static col-sm-offset-9">
									<button type="submit" class="btn btn-primary">提交</button>
									<button onclick="$.modal.close()" class="btn btn-danger" type="button">关闭</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>





<script type="text/javascript">
	window.rootPath="[[${rootPath}]]";
</script>
<script type="text/javascript" th:src="@{/static/admin/jquery/2.2.3/jquery.js}"></script>
<!-- 时间 -->
<script th:src="@{/static/admin/assets/js/bootstrap/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js}" type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js}" type="text/javascript"></script>


<!-- bootstarp 表格 -->
<script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/bootstrap-table.min.js}" type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}" type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/base_list.js}" type="text/javascript"></script>



<!-- 弹窗 -->
<script  th:src="@{/static/admin/assets/js/layer/layer.js}" type="text/javascript"></script>
<!-- 遮罩层 -->
<script  th:src="@{/static/admin/assets/js/blockUI/jquery.blockUI.js}" type="text/javascript"></script>
<!-- jqueryForm序列化 -->
<script  th:src="@{/static/js/jqueryFormSerializeJson.js}" type="text/javascript"></script>

<!-- bootstrap-fileinut上p传文件js -->
<script th:src="@{/static/admin/assets/js/bootstrap/js/fileinput.js}" type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/zh.js}" type="text/javascript"></script>
<!--wangeditor富文本编辑器js-->
<script th:src="@{/static/admin/assets/js/wangEditor/wangEditor1.js}" type="text/javascript"></script>

<!-- bootstarp 表单验证js -->
<script type="text/javascript">

	//wangeditor富文本编辑器开始
	var E = window.wangEditor
	var editor = new E('#div1')
	editor.customConfig.debug = true;
	editor.customConfig.uploadImgServer = rootPath+"/FileController/upload3";
	editor.customConfig.uploadFileName = 'myfiles';  //  与后台获取文件名相同
	editor.customConfig.uploadImgHooks = {
		// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
		// （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
		customInsert: function (insertImg, result, editor) {
			debugger
			// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
			// insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
			// 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
			for(var i=0;i<result.length;i++){//上传完毕，将文件名返回
				var url = result[i].pathUrl;
				insertImg(url);
			};
			// result 必须是一个 JSON 格式字符串！！！否则报错
		}
	};
	var $text1 = $('#text1')
	editor.customConfig.onchange = function (html) {
		// 监控变化，同步更新到 textarea
		$text1.val(html)
	}
	editor.create();
	// 初始化 textarea 的值
	$text1.val(editor.txt.html())
	//wangeditor富文本编辑器结束


	//上传文件开始
	$("#file-5").fileinput({
		uploadUrl:rootPath+"/FileController/upload2", // 后台使用js方法
		uploadAsync: false, //如想要批量上传成功后再回调的话则必须设置为同步上传 false
		showUpload: false, //是否显示上传按钮  这个上传按钮的回调是filebatchuploadsuccess
		showRemove:true, // 是否显示移除按钮
		showCaption: true,//是否显示标题
		minFileCount: 1,
		maxFileCount: 3,
		language : 'zh',
		msgFilesTooMany:'3',
		allowedFileExtensions: ['jpg','png','xlsx'],
		uploadExtraData:function (previewId, index) {
			//向后台传递id作为额外参数，是后台可以根据id修改对应的图片地址。
			var data = {
				"previewId": "附加参数",      //此处自定义传参
			};
			return data;
		},
		/*layoutTemplates :{
			 actionDelete:'', //去除上传预览的缩略图中的删除图标
			actionUpload:'',//去除上传预览缩略图中的上传图片；
			actionZoom:''   //去除上传预览缩略图中的查看详情预览的缩略图标。
		},*/
		initialPreviewAsData: true // identify if you are sending preview data only and not the markup
	}).on('filebatchpreupload', function(event, data) {
		if($('.imgClass').length>=3){
			var img = $(".kv-preview-thumb");
			img[3].remove();
			$(".kv-upload-progress").addClass("hide");
			return {
				message: "最多只能上传三张!"
			};
		}
	});
	//导入文件上传完成之后的事件
	$("#file-5").on("fileuploaded", function (event, data, previewId, index) {
		var previewId=previewId;
		var response = data.response;
		$("form").append("<input class='imgClass' id='a"+previewId+"' name='filePath'  value='"+response[0].pathUrl+"'>");
	});
	/*$('#file-5').on('filebatchuploadsuccess', function(event, data, previewId, index) {
		debugger
		var previewId=previewId;
		var index=index;
		var response = data.response;
		for(var i=0;i<response.length;i++){//上传完毕，将文件名返回
			$("form").append("<input class='imgClass' name='filePath'  value='"+response[i].pathUrl+"'>");
		};
		$("#isAlterFile").val("Y");
	})*/
	$('#file-5').on('filesuccessremove', function (event, previewId, extra) {
		//在移除事件里取出所需数据，并执行相应的删除指令
		$('#a'+previewId).remove();
	});
	$(".fileinput-remove-button").on("click",function(){  //删除按钮
		$('.imgClass').remove();
	});
	//点击浏览框右上角X 清空文件前响应事件
	$("#file-5").on("fileclear",function(event, data, msg){
		$('.imgClass').remove();
	});
	//上传文件结束


	$(function(){
		$("#MyDate").datetimepicker({
			format: "yyyy-mm-dd hh:00:00",
			//startDate: new Date(),
			autoclose: true,
			todayBtn: true,
			weeks: true,              // true 显示周数   f  alse 隐藏周数
			language: 'zh-CN',
			initialDate:new Date(),
			minView: 1
		});

       //jq表单验证开始
		$("#form-add").validate({
			rules:{
				name:{
					required:true,
					minlength: 2,
					maxlength: 20,
					remote: {
						url: rootPath + "/TAbbKefuController/checkNameUnique",
						type: "post",
						dataType: "json",
						dataFilter: function(data, type) {
							if (data == "0")
								return true;
							else
								return false;
						}
					}
				},
				myname:{
					required:true
				},
				email:{
					required:true,
					email:true
				},
				password:{
					required:true,
					rangelength:[3,10]
				},
				confirm_password:{
					equalTo:"#password"
				}
			},
			messages: {
				"name": {
					remote: "名称已经存在"
				},
				myname:{
					required:"必填"
				},
				email:{
					required:"必填",
					email:"E-Mail格式不正确"
				},
				password:{
					required: "不能为空",
					rangelength: $.format("密码最小长度:{0}, 最大长度:{1}。")
				},
				confirm_password:{
					equalTo:"两次密码输入不一致"
				}
			},
			submitHandler:function(form){
				add();
			}
		});
       //jq表单验证结束


		//bootstrap表单验证开始
		$('form').bootstrapValidator({
			message: 'This value is not valid',
			feedbackIcons: {
				valid: 'glyphicon glyphicon-ok',
				invalid: 'glyphicon glyphicon-remove',
				validating: 'glyphicon glyphicon-refresh'
			},
			callback:{
				name:{
					required:true,
					minlength: 2,
					maxlength: 20,
					remote: {
						url: rootPath + "/TAbbBannerController/checkNameUnique",
						type: "post",
						dataType: "json",
						dataFilter: function(data, type) {
							if (data == "0")
								alert("11");
							else
								alert("22");
						}
					}
				}
			},
			messages: {
				"name": {
					remote: "名称已经存在"
				}
			},
			fields: {
				imageUrl: {
					message: '用户名验证失败',
					validators: {
						notEmpty: {
							message: '跳转链接不能为空'
						},
						choice:{ //复选框个数验证
							min:1,
							max:3,
							message:"至少选择一项，最多选择三项"
						},
						callback: {  //自定义认证
							message: '验证失败',
							callback:function(value, validator){
								if (1==1){
									return false;
								}else{
									return true;
								}
							}
						},
						identical:{  //密码确认验证
							field:'newpasswd',
							message:"新密码和确认密码必须一致"
						},
						digits:{ //纯数字验证
							message: "只允许输入纯数字"
						},
						stringCase:{
							message: '必须包含大写字母。',
							case:'upper'
						},
						uri: {
							message: '跳转链接格式有误'
						},
						date:{   //日期格式样式
							format:"YYYY/MM/DD",
		                    message: '日期格式无效'
						},
						stringLength: {
							min: 6,
							max: 18,
							message: '用户名长度必须在6到18位之间'
						},
						regexp: {
							regexp: /^[a-zA-Z0-9_]+$/,
							message: '用户名只能包含大写、小写、数字和下划线'
						}
					}
				},
				skipUrl: {
					validators: {
						notEmpty: {
							message: '跳转链接不能为空'
						},
						stringLength: {
							min: 6,
							max: 18,
							message: '用户名长度必须在6到18位之间'
						},
						emailAddress: {
							message: '跳转链接格式有误'
						},
						//bootstrap的remote验证器需要的返回结果一定是json格式的数据 :
						//{"valid":false} //表示不合法，验证不通过
						//{"valid":true} //表示合法，验证通过
						remote:{ //ajax验证
							url: rootPath + "/TAbbBannerController/checkNameUnique",//验证地址
							message: '跳转链接已存在',//提示消息
							data:{imageUrl:2},
							delay :  2000,//设置2秒发起名字验证, 这里特别要说明，必须要加此属性，否则用户输入一个字就会访问后台一次，会消耗大量的系统资源，
							type: 'POST' //请求方式
						},
					}
				}
			},
			/*submitHandler: function (validator, form, submitButton) {  //验证成功的回调
            /// 版本号0.4.5支持
           // 版本号v0.5.2-dev不再支持submitHandler配置
        }*/
		}).on("success.form.bv",function(e){ //验证成功的回调
			// 版本号0.4.5支持
			// 版本号v0.5.2-dev支持
			debugger
			add();
		});
	})
	//表单验证结束


	/**
	 * 用户添加方法
	 */
	function add() {
		$text1.val(editor.txt.html())
		var dataFormJson=$("#form-add").serialize();
		$.ajax({
			cache : true,
			type : "POST",
			url : rootPath + "/TAbbBannerController/add",
			data : dataFormJson,
			async : false,
			error : function(request) {
				$.modal.alertError("系统错误");
			},
			success : function(data) {
				$.operate.saveSuccess(data);
			}
		});
	}
</script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrapValidator.min.js}" type="text/javascript"></script>


</body>


</html>
